<template>
  <div class="content_box">
    <div class="title">{{tent.title}}</div>
    <div class="intro">
      <div class="intros">
        <span>发布时间：{{tent.createTime | getDate}}</span>
        <span>发布人：{{tent.name}}</span>
      </div>
      <div class="xian"></div>
    </div>
    <img :src="tent.avatar" v-if="tent.avatar">
    <div class="content">
      {{tent.content}}
    </div>
  </div>
</template>

<script>
import { formatDate } from 'com/data'
import { mapState } from 'vuex'
export default {
  name: 'BoxContent',
  computed: {
    ...mapState({
      tent: 'ggX'
    })
  },
  filters: {
    getDate: function (time) {
      var data = new Date(time)
      return formatDate(data, 'yyyy-MM-dd')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .content_box{
    width: 100%
    margin-top: 10px
    height: calc(100% - 50px)
    .title{
      cursor: default
      width: 100%
      height: auto
      text-align: center
      font-size: .8rem
    }
    .intro{
      cursor: default
      width: 100%
      height: 30px
      margin: 0 auto
      margin-top: 30px
      .intros{
        margin: 0 auto
        text-align: center
        font-size: .3rem
        color: rgb(120,120,120)
        width: 60%
        height: auto
        span + span{
          margin-left: 30px
        }
      }
      .xian{
        margin-top: 40px
        width: 90%
        margin-left: 5%
        height: 1px
        border-top: 2px solid rgb(210,210,210)
      }
    }
    img{
      width: 800px
      height: 450px
      margin-left: 200px
      margin-top: 40px
    }
    .content{
      text-indent: 2em
      width: 100%
      min-height: 300px
      height: auto
      margin-top: 60px
      box-sizing: border-box
      padding-left: 1.2rem
      padding-right: 1.1rem
    }
  }
</style>
